<template>
  <div class="home">
    <swiper
          class="swiper"
          :options="swiperOption"
           @slideChange="onSlideChange"
           ref = "mySwiper"
      >
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <swiper-slide>Slide 6</swiper-slide>
      </swiper>
  </div>
</template>

<script>
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
    import 'swiper/css/swiper.css';
    export default {
      name: 'Home',
      data(){
        return{
            swiperOption: {
              slidesPerView: 3,
              spaceBetween: 30,
              pagination: {
                el: '.swiper-pagination',
                clickable: true
              }
            }
        }
      },
      components: {
         Swiper,
         SwiperSlide,
      },
      methods:{
          onSlideChange(){
            console.log('111');
          }
      },
    }
</script>

<style lang="less" scoped>
.home{
    .swiper{
      height: 300px;
      .swiper-slide{
        background-color: rebeccapurple;
      }
    }
  }
</style>